import "./Calendar7.css";
import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
// import { useControllableValue } from "ahooks";
import { useControllableValue } from "../hooks/useControllableValue";
interface CalendarProps {
  value?: Date;
  defaultValue?: Date;
  onChange?: (date: Date) => void;
}

interface CalendarRef {
  getDate: () => Date;
  setDate: (date: Date) => void;
}

const Calendar: React.ForwardRefRenderFunction<CalendarRef, CalendarProps> = (
  props,
  ref
) => {
  const [date, setDate] = useControllableValue<any>(props, {
    defaultValue: new Date(),
  });

  const handlePervMouth = () => {
    const curDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
    setDate(curDate);
  };
  const handleNextMouth = () => {
    const curDate = new Date(date.getFullYear(), date.getMonth() + 1, 1);
    setDate(curDate);
  };

  const zhMounth = [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ];

  const daysOfMonth = (year: number, month: number) => {
    return new Date(year, month + 1, 0).getDate();
  };

  const firtstDayOfMounth = (year: number, month: number) => {
    return new Date(year, month, 1).getDay();
  };

  const renderDates = () => {
    const days = [];
    const daysCount = daysOfMonth(date.getFullYear(), date.getMonth());
    const firstDay = firtstDayOfMounth(date.getFullYear(), date.getMonth());

    for (let i = 0; i < firstDay; i++) {
      days.push(<div key={`empty-${i}`} className="empty"></div>);
    }

    function clickHandler(i: number) {
      const curDate = new Date(date.getFullYear(), date.getMonth(), i);
      setDate(curDate);
    }

    for (let i = 1; i <= daysCount; i++) {
      if (i === date.getDate()) {
        days.push(
          <div key={i} onClick={() => clickHandler(i)} className="day selected">
            {i}
          </div>
        );
      } else
        days.push(
          <div onClick={() => clickHandler(i)} key={i} className="day">
            {i}
          </div>
        );
    }
    return days;
  };

  useImperativeHandle(ref, () => {
    return {
      getDate: () => {
        return date;
      },
      setDate: (date) => {
        setDate(date);
      },
    };
  });

  return (
    <div className="calendar">
      <div className="header">
        <button onClick={handlePervMouth}>&lt;</button>
        <div>
          {date.getFullYear()}年{zhMounth[date.getMonth()]}
        </div>
        <button onClick={handleNextMouth}>&gt;</button>
      </div>
      <div className="content">
        <div className="day">日</div>
        <div className="day">一</div>
        <div className="day">二</div>
        <div className="day">三</div>
        <div className="day">四</div>
        <div className="day">五</div>
        <div className="day">六</div>
        {renderDates()}
      </div>
    </div>
  );
};

const CalendarComponent = React.forwardRef(Calendar);
function Test() {
  let valueDate = new Date(2001, 1, 10);
  function onChange(v :Date) {
    console.log(v);
  }
  return (
    <div>
      <CalendarComponent
        value={valueDate}
        onChange={onChange}
      ></CalendarComponent>
    </div>
  );
}
export default Test;
/**
 *  useControllableValue
 *      很神奇呀感觉，侵入性很低，自己Calendar7中实现的，几个地方写判断侵入代码了
 *      他是感觉专门管理函数组件props的
 *      有value的话就走 onchange交给父组件是否更改value的控制模式
 *      没value就走defaultValue的非控制模式，更改useControllableValue的state状态
 *   参考文档：
 *     https://juejin.cn/post/6895647226107265037
 */
